<template>
  <section>
    <!--卡片01-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">Application Overview</span>
      </div>
      <div v-for="(item,key) in infoAs" class="text item ">
        <div style="text-align: right;" class="one infoKey">{{item.name + ' :&nbsp;&nbsp;'}}</div>

        <template v-if="item.val =='History'">
         <!-- <el-button v-if="query.task_run_component_type==1" type="text"
                     @click="toSparkHis">{{item.val}}
          </el-button>
          <router-link v-if="query.task_run_component_type==3"
                       :to="{ path: `/page317` ,query:{'task_real_id' : `${application_id}`,task_run_component_type:`${query.task_run_component_type}`,history:1} }">
            {{item.val}}
          </router-link>
          <router-link v-if="['1','3'].indexOf(query.task_run_component_type)<0"
                       :to="{ path: `/page333` ,query:{'application_id' : `${application_id}`} }">
            {{item.val}}
          </router-link>-->

          <el-button v-if="appInfo.applicationType=='SPARK'" type="text"
                     @click="toSparkHis">{{item.val}}
          </el-button>
          <router-link v-if="appInfo.applicationType=='TEZ'"
                       :to="{ path: `/page317` ,query:{'task_real_id' : `${application_id}`,task_run_component_type:`3`,history:1} }">
            {{item.val}}
          </router-link>
          <router-link v-if="appInfo.applicationType=='MAPREDUCE'"
                       :to="{ path: `/page333` ,query:{'application_id' : `${application_id}`} }">
            {{item.val}}
          </router-link>
        </template>


        <div v-else class="one">
          <template v-if="item.val=='ApplicationMaster'">
            <el-button v-if="appInfo.applicationType=='SPARK'" type="text"
                       @click="toSparkHis">{{item.val}}
            </el-button>
            <router-link v-else=""
              :to="{ path: `/page338` ,query:{'application_id' : `${application_id}`,task_run_component_type:`${query.task_run_component_type}`, state: `RUNNING`} }">
              {{item.val}}
            </router-link>
          </template>
          <span v-else>{{item.val}}</span>
        </div>

      </div>
    </el-card>
    <!--卡片02-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">Application Metrics</span>
      </div>
      <div v-for="item in infoBs" class="text item">
        <div style="text-align: right; " class="one infoKey">{{item.name + ' : '}}</div>
        <div class="one">{{item.val}}</div>
      </div>
    </el-card>
    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column label="AppAttemptId" prop="appAttemptId">

        <!--<template scope="scope">
          <router-link :to="'/page332/'+scope.row.appAttemptId">{{scope.row.appAttemptId}}</router-link>

          &lt;!&ndash;<el-button type="text"  @click="toLogs(scope.row.id)">logs</el-button>&ndash;&gt;
        </template>-->
      </el-table-column>

      <el-table-column v-for="item in tableTile"
                       :prop="item.key"
                       :label="item.name">
      </el-table-column>
      <!--<el-table-column label="模块名称">
          <template scope="scope">
              <router-link :to="'page311/'+scope.row.id">{{scope.row.mod}}</router-link>
          </template>
      </el-table-column>-->
      <el-table-column label="Logs">
        <template scope="scope">
          <!--<router-link :to="'/page336/'+scope.row.id" @click="toLogs(scope.row.id)">logs</router-link>-->
          <el-button type="text" @click="toLogs(scope.row)">logs</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.start_index"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagination.page_count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.count"
        style="float:right"></el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog :title="formTitle" v-model="logs">
      <pre>log</pre>
    </el-dialog>
  </section>
</template>

<script>
  import util from '../../common/util'
  import dao from '../../common/dao'

  export default {
    data() {
      return {
        application_id: "",
        query: {},
        infoAs: [],
        infoBs: [],
        appInfo: {},
        user: "",
        logs: false,
        formInline: {user: ''},
        tableTile: [/*{
         key:"id",
         name:"Attempt ID"
         },*/{
          key: "startTime",
          name: "Started"
        }, {
          key: "nodeHttpAddress",
          name: "Node"
        }, /*{
         key:"logs",
         name:"Logs"
         },*/{
          key: "blacklistedNodes",
          name: "Blacklised Nodes"
        }],
        tableData: [],
        pagination: {
          count: 0,
          start_index: 1,
          page_count: 20,
        },
      }
    },
    methods: {
      updateInfoA(appInfo){
        appInfo || (appInfo = {});
        this.user = appInfo.user;
        this.infoAs = [{
          name: 'User',
          val: appInfo.user
        }, {
          name: 'Name',
          val: appInfo.name
        }, {
          name: 'Application Type',
          val: appInfo.applicationType
        }, {
          name: 'Application Tags',
          val: appInfo.applicationTags
        }, {
          name: 'Application Priority',
          val: appInfo.priority
        }, {
          name: 'YarnApplicationState',
          val: appInfo.state
        }, {
          name: 'Queue',
          val: appInfo.queue
        }, {
          name: 'FinalSatus Reported by AM',
          val: appInfo.finalStatus
        }, {
          name: 'Started',
          val: new Date(appInfo.startedTime)
        }, {
          name: 'Elapsed',
          val: appInfo.elapsedTime
        }, {
          name: 'Tracking URL',
          val: appInfo.trackingUI
        }, {
          name: 'Log Aggregation Status',
          val: appInfo.finalStatus
        }, {
          name: 'Diagnostics',
          val: appInfo.diagnostics
        }, {
          name: 'Unmanaged Application',
          val: appInfo.unmanagedApplication
        }, /* {
         name: 'Application Node Label expression',
         val: ' (假)'
         },*/ {
          name: 'AM container Node Lable expression',
          val: appInfo.amNodeLabelExpression
        },]

      },
      updateInfoB(appInfo){
        appInfo || (appInfo = {});
        this.infoBs = [{
          name: 'Total Resource Preempted',
          val: `<memory:${appInfo.preemptedResourceMB || ''} vCores:${appInfo.preemptedResourceVCores || ''}>`
        }, {
          name: 'Total Number of Non-AM Containers Preempted',
          val: appInfo.numNonAMContainerPreempted
        }, /* {
         name: 'Resource Preempted from Current Preempted',
         val: '<memory:0, vCores:0> (假)'
         }, {
         name: 'Number of Non-AM Containers PreeMpted from Current Attempt',
         val: '0 (假)'
         }, {
         name: 'Aggregate Resource Allocation',
         val: '14336 MB-seconds (假)'
         },*/
        ]
      },
      toLogs(row){
        let containerId = row.containerId
        let nodeId = row.nodeId
        let user = this.user
        util.save("page336", {containerId, nodeId, user});
        if(this.appInfo.state=="RUNNING") this.$router.push({path: '/page3361',query: { uri: `${row.logsLink}`,node:`${row.nodeHttpAddress}` }})
        else this.$router.push({path: '/page3362',query: { uri: `${row.logsLink}`,node:`${row.nodeHttpAddress}` }})
      },
      handleSizeChange (val) {
        this.pagination.page_count = val;
      },
      handleCurrentChange (val) {
        this.pagination.start_index = val;
      },
      handleSelectionChange: function () {
      },
      getAppInfoByAppIDHttp(){

        let appID = this.$store.state.route.params.id || '';
        if (appID == '') {
          return false
        }
        ;
        dao.getAppInfoByAppID({appID: appID}).then((res) => {
          if (res.FX.err) return false;
          this.appInfo = res.body.appInfo || {};
          this.updateInfoA(res.body.appInfo);
          this.updateInfoB(res.body.appInfo);
          this.tableData = res.body.appAttemptList || []
        })

      },
      toSparkHis(){
        let application_id = this.$store.state.route.params.id || '';
        dao.sparkHisInof({application_id}).then(res => {
          if (res.FX.err) return false;
          if ((res.body.results || {}).url) window.open(res.body.results.url)
        })
      }
    },
    mounted: function () {
      this.application_id = this.$store.state.route.params.id || '';
      this.query = this.$store.state.route.query || {};
      this.getAppInfoByAppIDHttp();
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 10px;
  }

  .one {
    display: inline-block;
    width: 49%;
  }

  .infoKey {
    font-style: italic;
  }

  .right {
    text-align: right;
  }

  .el-card__heade {
    padding: 7px 20px;
  }
</style>